<template>
  <CDialog
    v-loading="loading"
    :visible="visible"
    :title="title"
    type="add"
    width="630px"
    @submit="handleSubmit"
    @cancel="handleCancel"
  >
    <i-form ref="form" :items="formItems" :model="form" label-width="140px">
    </i-form>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { configureGateway } from '@/api/paramsSetting'
export default {
  name: 'GatewayUpdateDlg',
  components: { CDialog },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    item: {
      type: Object,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      title: '编辑',
      form: {},
      loading: false,
      formItems: [
        {
          label: '服务器名称',
          type: 'select',
          options: [],
          value: 'serverId',
        },
      ],
    }
  },
  mounted() {
    this.$set(this.formItems, 0, {
      ...this.formItems[0],
      options: this.options,
    })

    this.formItems = [
      {
        label: '服务器名称',
        type: 'select',
        options: this.options,
        value: 'serverId',
      },
    ]
  },
  methods: {
    handleSubmit() {
      configureGateway({
        deviceId: this.item.deviceId,
        serverId: this.form.serverId,
      }).then(() => {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })

        this.$emit('update:visible', false)
        this.refresh()
      })
    },
    refresh() {
      this.$emit('refresh')
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
